<template>
<div>
 <div class="film_item" v-for="(film_item) in FilmsList" :key="film_item.filmId">
   <div class="film_item_left">
     <img :src="film_item.poster">
   </div>
   <div class="film_item_center">
     <h2>{{film_item.name}}<span>{{film_item.item.name}}</span></h2>
     <p>评分：{{film_item.grade}}</p>
     <p class="actors">主演：{{film_item.actors | getActor}}</p>
     <p>{{film_item.nation}} | {{film_item.runtime}}分钟</p>
   </div>
   <div class="film_item_reght">
     <button>购票</button>
   </div>
 </div>
</div>
</template>

<script>
import { getFilmsList } from '../../../api/film'
export default {
  data () {
    return {
      FilmsList: [],
      pageNum: 1,
      pageSize: 10,
      totalPages: 1,
      loading: false,
      noMore: false
    }
  },
  filters: {
    getActor (newValue) {
      let nameArr = newValue.map(item => {
        return item.name
      })
      return nameArr.join('、')
    }
  },
  methods: {
    // 加载更多
    loadMore () {
      // 判断是否还有下一页
      if (this.pageNum >= this.totalPages) {
        this.noMore = true
        return
      }
      this.loading = true
      this.pageNum++

      setTimeout(() => {
        getFilmsList({
          cityId: 110100,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 2,
          k: 2253369
        }).then((res) => {
          this.FilmsList = [...this.FilmsList, ...res.data.data.films]
          this.totalPages = res.data.data.total / this.pageSize
          this.loading = false
        })
      }, 2000)
    }
  }
}
</script>

<style scoped lang='scss'>
  .film_item{
    display: flex;
    height:90px;
    justify-content: flex-start;
    align-items: center;
    padding:15px 15px 15px 0;
    .film_item_left{
      flex-shrink: 1;
      img{
        width:66px;
        height:90px;
      }
    }
    .film_item_center{
      flex:1;
      overflow: hidden;
      padding: 0 10px;
      P{
        color:#797d82;
        font:13px/1.5 Tahoma,Helvetica,Arial,sans-serif;
      }
      .actors{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .film_item_reght{
      button{
      color:#ff5f16;
      width: 50px;
      height:25px;
      flex-shrink:1;
      border: 1px solid #ff5f16;
      background:#fff;
      border-radius: 4px;
      }
    }
  }
</style>
